<template>
	<view class="addEditForm">
		<view class="data-form bgfff" v-for="(item,index) in dataFormList" :key="index">
			<view class="del-drom flex-ac-je" v-if="index!=0">
				<text class="gui-icons" @tap="delForm(index)">&#xe636;</text>
			</view>
			<view class="data-form-item flex-dc">
				<text class="data-form-label f30 require">题干</text>
				<view class="data-form-input" style="margin-top: 20rpx;background: #f6f7f8;padding: 15rpx;">
					<textarea v-model="item.problem" :disabled="optionDisabled"
						:placeholder="optionDisabled?'-':'请输入题干'" placeholder-class="plStyle" auto-height
						style="min-height: 200rpx;" />
				</view>
			</view>
			<view class="data-form-item flex-dc" v-if="item.params&&item.params.options">
				<text class="data-form-label f30 require">选项</text>
				<view class="flex-ac" v-for="(opItem,opIndex) in item.params.options" :key="opItem.option">
					<text class="data-form-label f30">{{opItem.option}}</text>
					<view class="data-form-input" style="margin-top: 20rpx;">
						<input type="text" :disabled="optionDisabled" :value="opItem.content" v-model="opItem.content"
							:placeholder="optionDisabled?'-':'请输入'" placeholder-class="plStyle" />
					</view>
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">题目类型</text>
				<view class="data-form-input">
					<cpdd-select v-model="item.topicType" :disabled="optionDisabled" :list="selectList"
						keyname="name" valname="val" @change="changeTopicType(index,item)"></cpdd-select>
				</view>
			</view>
			<view class="data-form-item flex-ac">
				<text class="data-form-label f30 require">正确答案</text>
				<view class="data-form-input flex-ac" v-if="item.params&&item.params.options">
					<view class="answer-item cfff flex-ac-jc"
						:class="{'answer-check':item.answer.includes(opItem.option)}"
						@tap="changeAnswer(index,opIndex,item,opItem)" v-for="(opItem,opIndex) in item.params.options"
						:key="opItem.option">{{opItem.option}}</view>
				</view>
			</view>
		</view>
		<view class="saveBtn add-btn" @tap="addForm" v-if="!did">继续添加</view>
		<view class="right-area-footer2 flex-ac bgfff" v-if="!optionDisabled">
			<view class="saveBtn cancleBtn" @tap="handleCancle">取消</view>
			<view class="saveBtn" @tap="handleSubmit">保存</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				did: '',
				dataForm: { //单项表单
					id: '',
					curriculumId: '', //课程id
					chapterId: '', //章节id
					problem: '', //题干
					answer: [], //答案
					topicType: '', //类型  Single Multi Judge
					params: {
						options: [{
							option: 'A',
							content: ''
						}, {
							option: 'B',
							content: ''
						}, {
							option: 'C',
							content: ''
						}, {
							option: 'D',
							content: ''
						}]
					}
				},
				optionDisabled: false,
				selectList: [{
					val: 'Single',
					name: '单选'
				}, {
					val: 'Multi',
					name: '多选'
				}, {
					val: 'Judge',
					name: '判断'
				}],
				dataFormList: []
			}
		},
		onLoad(options) {
			console.log('options', options);
			this.did = options.id || ''
			this.dataForm.curriculumId = options.curriculumId ? options.curriculumId : ''
			this.dataForm.chapterId = options.chapterId ? options.chapterId : ''
			this.optionDisabled = options.op == 'look' ? true : false
			let title = options.op == 'look' ? '详情' : options.op == 'add' ? '新增' : '编辑'
			uni.setNavigationBarTitle({
				title
			})
			if (this.did) {
				this.dataForm.id=this.did
				let objItem = options.item?JSON.parse(options.item):{}
				this.loadDetail(objItem)
			} else {
				this.dataFormList = []
				this.dataFormList.push(this.dataForm)
			}
		},
		methods: {
			delForm(idx){
				this.$u.showModal('','确认删除当前编辑的题目吗？',(res)=>{
					if(res) return this.dataFormList.splice(idx,1)
				})
			},
			addForm(){
				this.dataFormList.push({ //单项表单
					curriculumId: this.dataForm.curriculumId, //课程id
					chapterId: this.dataForm.chapterId, //章节id
					problem: '', //题干
					answer: [], //答案
					topicType: '', //类型  Single Multi Judge
					params: {
						options: [{
							option: 'A',
							content: ''
						}, {
							option: 'B',
							content: ''
						}, {
							option: 'C',
							content: ''
						}, {
							option: 'D',
							content: ''
						}]
					}
				})
			},
			changeTopicType(idx, item) {
				item.answer = []
			},
			changeAnswer(idx, opIdx, item, opItem) {
				if(this.optionDisabled) return;
				// console.log('改变',idx,opIdx,item);
				if (item.topicType == 'Multi') {
					let index = item.answer.indexOf(opItem.option)
					if (index == -1) {
						item.answer.push(opItem.option)
						item.answer.sort()
					} else {
						item.answer.splice(index, 1)
					}
				} else {
					item.answer = []
					item.answer.push(opItem.option)
				}
				console.log('改变', item.answer);
			},
			loadDetail(obj) {
				Object.keys(this.dataForm).forEach(key => {
					if(key!='params'){
						if(key=='answer'){
							this.dataForm[key] = obj[key].split('')
						}else{
							this.dataForm[key] = obj[key]
						}
					}else{
						let arr = this.dataForm[key].options
						let arr2 = obj[key].options
						arr.forEach((item,idx)=>{
							let obj = arr2.filter(it => it.option==item.option)
							if(obj.length) item.content = obj[0].content
						})
					}
				})
				console.log('this.dataForm',this.dataForm);
				this.dataFormList.push(this.dataForm)
				// this.$http.get(`/training/question/${this.did}`).then(res => {
				// 	if (res.code == 200) {
				// 		console.log('res', res);
				// 		let result = res.data
				// 		Object.keys(this.dataForm).forEach(key => this.dataForm[key] = result[key])
				// 		console.log('this.dataForm', this.dataForm);
				// 		this.dataFormList.push(this.dataForm)
				// 	}
				// })
			},
			handleCancle() {
				this.$u.back()
			},
			handleSubmit() {
				console.log('dataFormList', this.dataFormList);
				let formData = []
				for (let i = 0; i < this.dataFormList.length; i++) {
					if (!this.dataFormList[i].problem) return this.$u.msg("请输入第"+ (i +1)+"题的题干！")
					let optionsLength = this.dataFormList[i].params.options.filter(item2=>item2.content=="")
					if (optionsLength.length>2) return this.$u.msg("第"+ (i +1)+"题的选项不能少于两项！");
					if (!this.dataFormList[i].topicType) return this.$u.msg("请选择第"+ (i +1)+"题的题目类型！");
					if (!this.dataFormList[i].answer.length) return this.$u.msg("请选择第"+ (i +1)+"题的答案！");
					let obj = { //单项表单
						curriculumId: this.dataFormList[i].curriculumId, //课程id
						chapterId: this.dataFormList[i].chapterId, //章节id
						problem: this.dataFormList[i].problem, //题干
						answer: this.dataFormList[i].answer.join(''), //答案
						topicType: this.dataFormList[i].topicType, //类型  Single Multi Judge
						params: {
							options: []
						}
					}
					this.dataFormList[i].params.options.forEach((op, opIdx) => {
						if (op.content) {
							obj.params.options.push(op)
						}
					})
					if(this.did){
						obj.id=this.did
					} 
					formData.push(obj)
				}
				this.realSumbit(formData);
			},
			realSumbit(formData) {
				uni.showLoading({
					title:'正在提交'
				})
				if (this.did) {
					this.dataForm.id = this.did
					this.$http.put('/training/question', formData[0]).then(res => {
						if (res.code == 200) {
							uni.$emit('reFlashList')
							this.$u.msg('修改成功!')
							this.$u.back(1, 1000)
						}
					})
				} else {
					this.$http.post('/training/question/addBatch', formData).then(res => {
						if (res.code == 200) {
							uni.$emit('reFlashList')
							this.$u.msg('新增成功!')
							this.$u.back(1, 1000)
						}
					})
				}
			},
		}
	}
</script>

<style lang="less">
	.data-form{
		position: relative;
		margin-bottom: 10rpx;
		.del-drom{
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			font-size: 38rpx;
			width: 100rpx;
			color: #ff0000;
		}
	}
	.add-btn{
		margin: 30rpx 160rpx 30rpx 160rpx;
		height: 70rpx;
		font-size: 28rpx;
	}
	.answer-item {
		width: 60rpx;
		height: 60rpx;
		border-radius: 4rpx;
		background: #ccc;
		margin-right: 30rpx;
	}

	.answer-check {
		background: #2979ff;
		transition: all .5s;
	}
</style>